<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-row >
        <el-col :span="8">
          <el-form-item v-if="doctor.id" label="医生编号">
           {{doctor.id}}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="医生账号">
            <el-input v-model="doctor.phone" placeholder="请输入有效的手机号"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="医生头像">
            <el-upload
              height="50px"
              name="file"
              class="avatar-uploader"
              action="http://localhost:8080/upload/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="doctor.image" :src="doctor.image" class="avatar"  width="50px"/>
              <i v-else class="el-icon-plus avatar-uploader-icon"  id="icon1"></i>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row >
        <el-col :span="8">
          <el-form-item label="医生姓名">
            <el-input v-model="doctor.name" placeholder="请输入"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="医生角色">
            <el-select v-model="doctor.roleId"  clearable placeholder="请选择角色">
              <el-option
                   v-for="role in roleList"
                   :key="role.id"
                   :value="role.id"
                   :label="role.name"
                />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="登录密码">
            <el-input v-model="doctor.password" placeholder="请输入"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="性别">
        <el-select v-model="doctor.sex"  clearable placeholder="请选择性别">
          <el-option :value="0" label="女"/>
          <el-option :value="1" label="男"/>
        </el-select>
      </el-form-item>

      <el-form-item label="医生简介">
        <el-input v-model="doctor.description" type="textarea"/>
      </el-form-item>
      <el-form-item label="医生擅长">
        <el-input v-model="doctor.skill" type="textarea"/>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="handleSaveOrUpdate">保存</el-button>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="back">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import doctor from '../../../api/admin/doctor'
import role from '../../../api/admin/role'
export default {
  data(){
    return{
      doctor:{
        image:''
      },
      roleList:[],                      //角色列表
      saveBtnDisabled:false,           //不可被点击
    }
  },

  created() {
    // 判断是修改操作还是新增操作，主要判断的依据是地址栏后面是否有id值
    console.log(this.$route.params);
    const id=this.$route.params.id;
    // 传过来有数据
    if (this.$route.params&&this.$route.params.id){
      //根据id查询
      this.queryById(this.$route.params.id)
    }
    else {
      console.log("2222222")
      this.trainer={avatar:""};
    }
     this.getRoleList();
    // this.getLevles();
  },

  methods:{
    handleSaveOrUpdate(){
      this.saveBtnDisabled = true;
      console.log()
      if (this.$route.params!=null&&this.doctor.id != undefined){
        doctor.edit(this.doctor).then(res=>{
          this.$message.success(res.message);
          this.$router.push("/doctor");
        })
      }
      else {
        //设置为空

        doctor.add(this.doctor).then(res=>{
          if (res.flag){
            this.$message.success(res.message);
            this.$router.push("/doctor")
          }
        })
      }
      this.saveBtnDisabled=false;

    },
    queryById(id){
      doctor.queryById(id).then(res=>{
        this.doctor=res.data;
      })
    },

    //页面加载时出发头衔查询
  /*  getLevles(){
      levle.searchAll().then(res=>{
        console.log(res.data)
        this.levleList=res.data;
      })
    },*/

    //上传成功后触发执行
    handleAvatarSuccess(res, file) {
      this.doctor.image ="http://rj0158yod.hd-bkt.clouddn.com/"+ res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpeg'|| file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //返回列表
    back(){
      this.$router.push("/doctor")
    },
    getRoleList(){
     role.getAll().then(res=>{
       this.roleList=res.data;
     })
    },

  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
#icon1{
  font-size: 12px;
  width: 50px;
  height: 50px;
}
</style>
